<template>
  <MyDialog ref="myDialogRef" title="Search" :submit="onSubmit" >
    <q-card>
      <q-card-section class="q-gutter-y-sm row">
        <q-item-label class="col-4 fal">Stock Code: </q-item-label>
        <q-input
          borderless
          v-model="filterForm.data.stock_code"
          use-input
          input-debounce="0"
          hide-bottom-space
          lazy-rules
          class="col-8 fal input-css"
          :dense="true"
          :disable="disable"
        >
        </q-input>

        <q-item-label class="col-4 fal">system: </q-item-label>
        <q-input
          borderless
          v-model="filterForm.data.system"
          use-input
          input-debounce="0"
          hide-bottom-space
          lazy-rules
          class="col-8 fal input-css"
          :dense="true"
          :disable="disable"
        >
        </q-input>

        <q-item-label class="col-4 fal">Short Description: </q-item-label>
        <q-input
          borderless
          v-model="filterForm.data.description"
          use-input
          input-debounce="0"
          hide-bottom-space
          lazy-rules
          class="col-8 fal input-css"
          :dense="true"
          :disable="disable"
        >
        </q-input>

      </q-card-section>
    </q-card>
  </MyDialog>
</template>

<script setup lang="ts">
import {defineExpose, reactive, ref, watch} from 'vue';
import MyDialog from '../container/MyDialog.vue';
import { stockTtemSearch } from 'src/services/type';

const filterForm = reactive<{
  data: stockTtemSearch;
}>({
  data: {
      stock_code: '',
      system: '',
      description: ''
  },
});
const emit = defineEmits(['filter']);
const myDialogRef = ref(null);
const disable = ref(false);
function onSubmit() {
  emit('filter', filterForm);
}

function myDialogSubmitLonding(longing) {
  disable.value = longing;
  myDialogRef.value.submitLoading(longing);
}

defineExpose({ myDialogSubmitLonding });
</script>
